<template>
  <page-header-wrapper>
    <a-card :bordered='false'>
      <div class='table-page-search-wrapper'>
        <a-form layout='inline'>
          <a-row :gutter='24'>
            <a-col :md='4' :sm='24'>
              <a-form-item>
                <a-input placeholder='请输入商品名称' v-model='queryParam.name' />
              </a-form-item>
            </a-col>
            <a-col :md='4' :sm='24'>
              <span class='table-page-search-submitButtons'>
                <a-button type='primary' @click='handelSearch(true)' icon='search'>查询</a-button>
              </span>
            </a-col>
            <a-col :md='1' :sm='24' :offset='14'>
              <a-button type='primary' icon='plus' @click='handleAdd()'>新增</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table
        ref='table'
        size='default'
        rowKey='id'
        :columns='columns'
        :data='loadData'
        showPagination='auto'
        :pagination="{'show-total':total => `共 ${total} 条`}"
      >
        <template slot='img_url' slot-scope='text'>
          <a-avatar shape='square' :size='64' icon='bank' :src='text' style='width:62px;height:62px' />
        </template>
        <template
          slot='is_integral'
          slot-scope='is_integral'>
          <a-tag :color="is_integral == 1 ?'blue' :'red'">{{ is_integral | kindsStatusFilter }}</a-tag>
        </template>
        <template
          slot='is_express'
          slot-scope='is_express'>
          <a-tag :color="is_express == 1 ?'blue' :'red'">{{ is_express | kindsStatusFilter }}</a-tag>
        </template>
        <template
          slot='is_self'
          slot-scope='is_self'>
          <a-tag :color="is_self == 1 ?'blue' :'red'">{{ is_self | kindsStatusFilter }}</a-tag>
        </template>
        <template
          slot='is_recommend'
          slot-scope='is_recommend'>
          <a-tag :color="is_recommend == 1 ?'blue' :'red'">{{ is_recommend | kindsStatusFilter }}</a-tag>
        </template>
        <template
          slot='is_activity'
          slot-scope='is_activity'>
          <a-tag :color="is_activity == 1 ?'blue' :'red'">{{ is_activity | kindsStatusFilter }}</a-tag>
        </template>
        <template
          slot='status'
          slot-scope='status'>
          <a-tag :color="status == 1 ?'blue' :'red'">{{ status | kindsStatusFilter }}</a-tag>
        </template>
        <a-tag :color="text == 1 ? 'blue' : 'red'" slot='status' slot-scope='text'>{{ text | statusFilter }}</a-tag>
        <span slot='action' slot-scope='text, record'>
          <template>
            <a @click='handleEdit(record)'>编辑</a>
            <a-divider type='vertical' />
            <a @click='handleStatus(record)'>{{ record.status == 1 ? '下架' : '上架' }}</a>
            <a-divider type='vertical' />
            <a @click='handleDelete(record)'>删除</a>
          </template>
        </span>
      </s-table>

      <create-form
        ref='createModal'
        @ok='handleSearch'
      />
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { goodsList, goodsDel, goodsPutaway, goodsDownfall } from '@/api/goods'
import orderStatus from '@/mixins/orderStatus'
import CreateForm from './modules/GoodsForm'
import formTableMixin from '@/mixins/formTableMixin'

const columns = [
  {
    title: '主图',
    dataIndex: 'img_url',
    scopedSlots: { customRender: 'img_url' }
  },
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '类型',
    dataIndex: 'kinds_name'
  },
  {
    title: '价格',
    dataIndex: 'price',
    customRender(text) {
      return '￥' + text
    }
  },
  {
    title: '会员价格',
    dataIndex: 'vip_price',
    customRender(text) {
      return '￥' + text
    }
  },
  {
    title: '颜色尺寸',
    dataIndex: 'color_size'
  },
  {
    title: '是否使用积分兑换价格',
    dataIndex: 'is_integral',
    scopedSlots: { customRender: 'is_integral' }
  },
  {
    title: '是否包邮',
    dataIndex: 'is_express',
    scopedSlots: { customRender: 'is_express' }
  },
  {
    title: '快递价格',
    dataIndex: 'express_price',
    customRender(text) {
      return '￥' + text
    }
  },
  {
    title: '是否自营',
    dataIndex: 'is_self',
    scopedSlots: { customRender: 'is_self' }
  },
  {
    title: '是否推荐',
    dataIndex: 'is_recommend',
    scopedSlots: { customRender: 'is_recommend' }
  },
  {
    title: '是否参加活动',
    dataIndex: 'is_activity',
    scopedSlots: { customRender: 'is_activity' }
  },
  {
    title: '是否上架',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]

const STATUS = {
  1: '是',
  0: '否'
}

export default {
  name: 'GoodsList',
  mixins: [orderStatus, formTableMixin],
  components: {
    CreateForm
  },
  data() {
    this.columns = columns
    this.delAction = goodsDel
    this.listAction = goodsList
    return {}
  },
  filters: {
    statusFilter(key) {
      return STATUS[key]
    }
  },
  methods: {
    handleStatus(record) {
      this.$confirm({
        title: '你确定要进行此项操作吗?',
        content: (record.status === 1 ? '下架' : '上架') + '商品',
        onOk: () => {
          const action = record.status === 1 ? goodsDownfall : goodsPutaway
          action({ id: record.id }).then(res => {
            this.$refs.table.refresh()
            this.$message.success('操作成功')
          }).catch(() => {
          })
        }
      })
    }
  }
}
</script>
